<template>
    <div class="goodlist-container">
        <!-- <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> -->
           <!-- <div class="ball" v-show="ballFlag"></div> -->
        <!-- </transition>          -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<Swipe :lunboList="goodsImage" :isFull="isFull"></Swipe>
					</div>
				</div>
		</div>
        <div class="mui-card">
				<div class="mui-card-header">{{goodsInfo.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
				         <p class="price">
                             <span>市场价:<del>￥{{goodsInfo.market_price}}</del></span>&nbsp;&nbsp;
                             <span>销售价:<strong>￥{{goodsInfo.sell_price}}</strong></span>
                         </p>
                         <p>
                             购买数量:<GoodInfonumrun @sellCount="getCountNum" :max = "goodsInfo.stock_quantity"></GoodInfonumrun>
                         </p>
                         <mt-button type="primary">立即购买</mt-button>
                         <mt-button type="danger" @click="addShopCar">加入购物车</mt-button>
					</div>
				</div>
		</div>
        <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
					    <p>商品货号:{{goodsInfo.goods_no}}</p>
                        <p>剩余库存:{{goodsInfo.stock_quantity}}</p>
                        <p>上架时间:{{goodsInfo.add_time|dateFormat}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
                    <mt-button class="top" size="large" plain type="primary" @click="goDesc(id)">图文介绍</mt-button>
                    <mt-button class="bottom" size="large" plain type="danger" @click="goPinlun(id)">商品评论</mt-button>
                </div>
			</div>
    </div>
</template>
<script>
import Swipe from "../subcomponents/Swipe.vue";
import GoodInfonumrun from "../subcomponents/GoodInfo_numrun.vue";
export default {
    data(){
        return{
            id:this.$route.params.id,
            goodsImage:[],
            goodsInfo:{},
            isFull:false,
            ballFlag:false,
            sellCount:1
        }
    },
    created(){
        this.getGoodsImage();
        this.getGoodsInfo();
    },
    methods:{
        getGoodsImage(){
            this.$http.get("api/getthumimages/"+this.id).then((result)=>{
                if(result.body.status===0){
                    result.body.message.forEach(item=>{
                        item.img = item.src;
                    });
                    this.goodsImage = result.body.message;
                }else{
                    alert("请求失败")
                }
            })
        },
        getGoodsInfo(){
            this.$http.get("api/goods/getinfo/"+this.id).then((result)=>{
                if(result.body.status===0){
                    this.goodsInfo = result.body.message[0];
                }else{
                    alert("请求失败")
                }
            })
        },
        goDesc(id){
            this.$router.push({name:"goodsDesc",params:{id}})
        },
        goPinlun(id){
            this.$router.push({name:"goodsPinlun",params:{id}})
        },
        addShopCar(){
           this.ballFlag=!this.ballFlag;
           var goodsInfoCar = {
               id:this.id,
               sellCount:this.sellCount,
               price:this.goodsInfo.sell_price,
               select:true
           };
           this.$store.commit("addStateCar",goodsInfoCar);
        },
        getCountNum(numCount){
            this.sellCount = numCount;
            console.log(this.sellCount)
        }
        // beforeEnter(el){
        //   el.style.transform = "translate(0,0)";
        // },
        // enter(el,done){
        //   el.offsetTop;
        //   el.style.transform = "translate(100px,100px)";
        //   el.style.transition = "all 1s ease";
        //   done()
        // },
        // afterEnter(el){
        //    this.ballFlag=!this.ballFlag;
        // }
    },
    components:{
        Swipe,
        GoodInfonumrun
    }
}
</script>
<style>
  .goodlist-container{
      background-color:#eee;
  }
  .mui-card .price span strong{
      color:red;
      font-size:16px;
  }
  .mui-card .mui-card-footer{
      display:block;
  }
  .mui-card .mui-card-footer .top{
      margin:20px 0px;
  }
  .mui-card .mui-card-footer .bottom{
      margin-bottom:10px
  }
  .ball{
    width:15px;
    height:15px;
    border-radius:50% 50%;
    background-color:red;
    position:absolute;
    z-index:66;
    top:400px;
    left:138px;
  }
</style>
